<template>
  <div>
    <el-row :gutter="8" style="width: 100%; height: 100%;">
      <el-col :span="8" style="height: 100%;">
        <MkQueryContainer>
          <template #header>
            <el-form ref="queryForm" :inline="true">
              <el-form-item label="关键字">
                <el-input @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
              </el-form-item>
              <el-form-item>
                <MkButtonQuery @click="search"> </MkButtonQuery>
              </el-form-item>
            </el-form>
          </template>
          <MkTable :data="tableData" v-loading="loading" @row-click="setEnumType" max-height="500px">
            <MkColumnIndex />
            <MkColumn prop="enumType" label="枚举类型" />
            <MkColumn prop="title" label="枚举说明" />
            <MkColumn prop="remark" label="备注" />
          </MkTable>
          <MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
            @query="search" />
        </MkQueryContainer>
      </el-col>
      <el-col :span="16" style="height: 100%;">
        <MkQueryContainer>
          <template #header>
            <div style="display: flex;">
              <MkButtonAdd @click="openEdit" style="margin-bottom: 18px;">
              </MkButtonAdd>
              <i style="flex: 1;"></i>
              <h3 v-if="!isNull(ctx.selectRow)">{{ ctx.selectRow.title }}</h3>
              <i style="flex: 2;"></i>
            </div>
          </template>
          <MkTable :data="ctx.basEnumList" v-loading="loading2" @row-dblclick="openEdit">
            <MkColumnIndex />
            <MkColumn prop="enumType" label="枚举类型" />
            <MkColumn prop="code" label="枚举值" />
            <MkColumn prop="logic" label="逻辑" />
            <MkColumn prop="orderNo" label="排序" width="70" />
            <MkColumn prop="remark" label="备注" />
            <MkColumnIsEnabled />
          </MkTable>
        </MkQueryContainer>
      </el-col>
    </el-row>
    <Edit ref="editRef" @query="getEnumList" />
  </div>
</template>

<script lang='ts' setup name="basEnum">
import { isNull, showWarning, clog } from '/@/utils';
import { usePageQuery, useLoadingFetch } from '/@/hooks'
import { BasEnumApi, BasEnum } from '/@/api/bas/basEnum';
import { BasEnumTitleApi, BasEnumTitle } from '/@/api/bas/basEnumTitle';
import Edit from './edit.vue';

const editRef = ref<InstanceType<typeof Edit>>();
const { searchParam, total, tableData, loading, search } = usePageQuery(BasEnumTitleApi().page)
const ctx = reactive({
  basEnumList: [] as BasEnum[],
  selectRow: {} as BasEnumTitle,
});

const { fetch, loading: loading2 } = useLoadingFetch(BasEnumApi.getByType);

onMounted(() => { search() })

/** 获取对应枚举列表 */
const setEnumType = async (row: BasEnumTitle) => {
  if (!row || !row.enumType) return;
  ctx.selectRow = row;
  await getEnumList();
};

/** 获取对应枚举列表 */
const getEnumList = async () => {
  ctx.basEnumList = await fetch({ enumType: ctx.selectRow.enumType });
  clog(ctx.basEnumList)
};

const openEdit = (row: BasEnum) => {
  if (isNull(ctx.selectRow)) {
    showWarning('请先左边列表选择一个枚举类型再新增');
    return;
  }
  if (!row || isNull(row.code)) {
    editRef.value?.openFn({ enumType: ctx.selectRow.enumType, orderNo: '' } as BasEnum);
  } else {
    editRef.value?.openFn(row);
  }
};
</script>

<style lang='scss' scoped></style>